<template>
  <div class="com-container bg-blue-lightest">
    <div class="title">{{ row.title }}</div>
    <div class="d-flex fs-sm">
      <div class="self-end">{{ row.houseAddedStatus }}</div>
      <div class="fr">
        <el-button class="btn" type="primary" round size="mini" @click="handleSetting">去设置</el-button>
      </div>
    </div>
    <div class="d-flex fs-sm mt10">
      <div>{{ row.timePointsNum ? `设置了${row.timePointsNum}个时间点` : '未设置时间点' }}</div>
      <div class="fr" v-if="row.taskStatus === '2'">
        <el-button class="btn" type="success" round size="mini" @click="handleStart" :disabled="row.isLoading"
          >恢复使用</el-button
        >
      </div>
      <div class="fr" v-if="row.taskStatus === '1'">
        <el-button class="btn" type="danger" round size="mini" @click="handleStop" :disabled="row.isLoading"
          >停止使用</el-button
        >
      </div>
    </div>
    <div class="flex-1 d-flex ai-end">
      <el-tag :type="taskStatusOptins[row.taskStatus].color" effect="dark" size="mini">
        {{ taskStatusOptins[row.taskStatus].text }}
      </el-tag>
      <template v-if="row.taskStatus === '2'">
        <span class="ml10" v-if="row.stopType === '2'">您的树懒会员已失效，请联系客服重新开启树懒会员</span>
        <span class="ml10" v-if="row.stopType === '3'">您的端口出现异常情况，请先重新检查端口或联系树懒客服</span>
        <!-- <span class="ml10" v-else>{{ row.stopReason }}</span> -->
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RefreshSelect',

  components: {},

  props: {
    row: {
      type: Object,
      default() {
        return {};
      }
    }
  },

  data() {
    this.taskStatusOptins = {
      '0': {
        color: 'info',
        text: '未开启'
      },
      '1': {
        color: 'success',
        text: '开启中'
      },
      '2': {
        color: 'danger',
        text: '已停止'
      }
    };
    return {};
  },

  computed: {},

  watch: {},

  beforeMount() {},

  mounted() {},

  methods: {
    handleSetting() {
      const { houseType, id = '' } = this.row;
      this.$emit('setting', { id, type: houseType });
    },
    handleStart() {
      const { id } = this.row;
      this.$emit('toggle', { status: '1', id });
    },
    handleStop() {
      const { id } = this.row;
      this.$emit('toggle', { status: '2', id });
    }
  }
};
</script>
<style lang="scss" scoped>
.com-container {
  display: flex;
  flex-direction: column;
  padding: 24px 60px 24px 40px;
  height: 180px;
  border-radius: 10px;
}

.title {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 14px;
}

.btn {
  width: 100px;
}
</style>
